<script setup>
  import loginImg from '@/assets/img/loginImg.svg'
  import {reactive, ref} from "vue";
  import {useRouter} from "vue-router";
  import {LOCAL, SESSION} from "@/utils/catch.js";
  import {menu} from "@/dict/menuDict.js";
  import {MENU} from "@/conf/menuConf.js";
  import {useMenuTreeStore} from "@/stores/menuTreeStore.js";
  import {login} from  "../../api/user/login"
  import { ElMessage } from 'element-plus';
  import {addMenuRouter} from "@/utils/routerUtils.js";


  const router = useRouter()
  const ruleLoginFormRef = ref({})
  const menuTreeStore = useMenuTreeStore()
  const ruleForm = reactive({
    accountNo:'',
    passWord:''
  })
  const rules = reactive({
    accountNo:[{
      validator:(rule,val,callBack) =>{
        if (!val){
          callBack(new Error('请输入用户名'))
          return
        }
        callBack()
      },
      trigger: 'blur'
    }],
    passWord:[{
      validator:(rule,val,callBack) =>{
        if (!val){
          debugger
          callBack(new Error('请输入密码'))
          return
        }
        callBack()
      },
      trigger: 'blur'
    }]
  })

  function submit(form){
    if (form){
      form.validate((valid) => {
        if (valid){
            submitForm()
        }
      })
    }
  }

  /**
   * 登录方法
   */
  function submitForm(){
     login(ruleForm.accountNo,ruleForm.passWord).then((res)=>{

       if (res.data.code==0){
         //存储token和用户信息
         LOCAL.set("token",res.data.data)
         LOCAL.set("user",ruleForm.accountNo)
         //表明该用户已经登录
         // userStore.updateLoginStatus(true)
         SESSION.set("userLoginStatus",true)
         queryMenu()
         router.push('/main/home')
         ElMessage.success("登录成功")
       }
      })
  }

  function queryMenu(){
    menuTreeStore.menuTree = MENU
    addMenuRouter(menuTreeStore,router)
  }
</script>

<template>
  <div class="_mainLayout">
    <div class="_round"/>
    <el-image :src="loginImg" class="_loginImg"/>
    <div class="_loginLayout">
      <div class="loginTitle">
        内容分销平台
      </div>
      <div style="display: flex;justify-content: center;align-items: center;height: 40%">
        <el-form
                ref="ruleLoginFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                label-position="top"
                style="max-width: 400px;height:100%;flex: 100%;margin-top: 120px">
          <el-form-item label="用户名" prop="accountNo">
            <el-input v-model="ruleForm.accountNo"/>
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input  show-password v-model="ruleForm.passWord"/>
          </el-form-item>
          <div style="display: flex;justify-content: space-evenly">
            <el-button type="primary" @click="submit(ruleLoginFormRef)">登录</el-button>
            <el-button>注册</el-button>
          </div>
        </el-form>
<!--        <div style="position: absolute;bottom: 0;">-->
<!--          <el-image :src="formImg" style="width: 20vw"/>-->
<!--        </div>-->
      </div>

    </div>
  </div>
</template>

<style scoped>
  ._round{
    height: 2500px;
    width: 2500px;
    border-radius: 100%;
    position: absolute;
    bottom: 0;
    right:40vw;
    animation: round 1s;
    background-color: white;
  }
  ._mainLayout{
    overflow: hidden;
    background-color: var(--blue);
  }
  ._loginImg{
    height: 40vw;
    width: 40vw;
    position: relative;
    opacity: 0;
    animation: showLoginImg 1s 1s both;
  }

  ._loginLayout{
    height: 50vh;
    width: 30vw;
    background-color: white;
    position: absolute;
    right: 5vw;
    top:20vh;
    border-radius: 20px;
    animation: formRightTo 1s;
  }

  .loginTitle{
    color: var(--blue);
    font-size: 3em;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  @keyframes round {
    0%{
      right: 100vw;
    }
    100%{
      right: 40vw;
    }
  }
  @keyframes showLoginImg {
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }

  @keyframes formRightTo {
    0%{
      right: -30vw;
    }
    100%{
      right: 5vw;
    }
  }
</style>
